<style lang="scss" scoped>
  @import '../../styles/search.scss' ;
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select{
    margin-right: 10px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
<template>
  <div>
    <div class="commhightseach">
      <div class="seach-icon"><i class="el-icon-menu"></i>筛选</div>
      <div class="seachtype" @click="changetype" >{{showtotle>2?'普通搜索':'高级搜索'}}<i v-bind:class="{'el-icon-caret-bottom':isactive ,'el-icon-caret-top':!isactive}" ></i></div>
    </div>
    <el-form :inline="true" :model="form" class="demo-form-inline seachpanel" ref="seachform">
      <el-form-item  label="统计日期" prop="timevalue">
        <el-date-picker
          v-model="form.timevalue"
          :editable="false"
          :clearable="false"
          type="date"
          placeholder="选择日期"
          @change="changedate"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item  prop="startTime">
        <el-time-select
          placeholder="起始时间"
          v-model="form.startTime"
          :editable="false"
          :clearable="false"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:59'}"
          @change="changeStartTime"
        >
        </el-time-select>
      </el-form-item>
      <el-form-item prop="endTimes">
        <el-time-select
          placeholder="结束时间"
          v-model="form.endTimes"
          :editable="false"
          :clearable="false"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:59',
            minTime: form.startTime }"
          @change="changeEndTime">
        </el-time-select>
      </el-form-item>
      <span  v-if="showtotle>3" >
        <el-form-item label="手机号" prop="telephone" >
        <el-input v-model="form.telephone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="车牌号" prop="number" >
        <el-input v-model="form.number" placeholder="车牌号"></el-input>
      </el-form-item>
      </span>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button       @click="resetForm('seachform')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/babel">
  import moment from 'moment'
  export default {
    nameL:'SearchBox',
    data() {
      return {
        select: '1',
        showtotle: 2,
        isactive: true,
        form:{
          timevalue: moment(new Date()).format("YYYY-MM-DD"),
          startTime: '00:00',
          endTimes: '12:00',
        },
        value:''

      }
    },
    methods: {
      onSubmit() {
        this.form.startDate=moment(this.form.timevalue).format("YYYY-MM-DD")+' '+this.form.startTime+':00'
        this.form.endDate=moment(this.form.timevalue).format("YYYY-MM-DD")+' '+this.form.endTimes+':00'

        this.$emit('seach', this.form)
      },
      changetype() {
        if (this.showtotle > 2) {
          this.showtotle = 1
          this.isactive = true
        } else {
          this.showtotle = 5
          this.isactive = false
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.form.startDate=moment(this.form.timevalue).format("YYYY-MM-DD")+' '+this.form.startTime+':00'
        this.form.endDate=moment(this.form.timevalue).format("YYYY-MM-DD")+' '+this.form.endTimes+':00'
        this.$emit('seach', {...this.form,reset:true})

      },
      changedate(e){
        this.form.timevalue=moment(e).format("YYYY-MM-DD")
        console.log(this.form.timevalue)
        if(e && e!==''){
          this.form.startDate=this.form.timevalue+' '+this.form.startTime+':00'
          this.form.endDate=this.form.timevalue+' '+this.form.endTimes+':00'
        }else {
          this.form.startDate=this.form.timevalue+' '+this.form.startTime+':00'
          this.form.endDate=this.form.timevalue+' '+this.form.endTimes+':00'
        }
        this.$emit('seach', this.form)
      },
      changeStartTime(e){
        if(e && e!=='' && e!=='null'){
          this.startTime=e
          this.form.startDate=this.form.timevalue+' '+e+':00'
          this.form.endDate=this.form.timevalue+' '+this.form.endTimes+':00'
        }else {
          this.startTime="00:00"
          this.form.startDate=this.form.timevalue+' '+'00:00:00'
          this.form.endDate=this.form.timevalue+' '+this.form.endTimes+':00'
        }
        this.$emit('seach', this.form)
      },
      changeEndTime(e){
        if(e && e!=='' && e!=='null'){
          this.endTimes=e
          this.form.startDate=this.form.timevalue+' '+this.form.startTime+':00'
          this.form.endDate=this.form.timevalue+' '+e+':00'
        }else {
          this.endTimes='00:00'
          this.form.startDate=this.form.timevalue+' '+this.form.startTime+':00'
          this.form.endDate=this.form.timevalue+' '+'00:00:00'
        }
        this.$emit('seach', this.form)
      }
    }
  }

</script>

